<template>
    <view>
        <view>
            <!-- 与导航栏增加一定的间距 ，而camera-->
            <view class="u-flex u-row-right" style="width: 100%">
                <view class="camera u-flex u-row-center"> </view>
            </view>
            <!-- 在独占一行的容器里面定义图像、登录、扫描操作按钮 -->
            <!-- u-p-l-x是uni-padding-left-x的缩写 -->
            <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-30" @tap="GoToLogin()">
                <view class="u-m-r-10">
                    <!-- 通过vue绑定data的本地图像，size定义头像的宽高 -->
                    <u-avatar :src="userInfo.user_pic" mode="square" size="100"></u-avatar>
                </view>
                <view class="u-flex-1">
                    <!-- 使用v-if限定usename的插值显示 -->
                    <view class="u-font-14 u-tips-color" v-if="userInfo.id">
                        <h3 style="font-weight: bold;">用户名: {{userInfo.username}}</h3>
                    </view>
                    <!-- 如果method方法通过了就显示登录 -->
                    <view class="u-font-18 u-p-b-20" v-else>您还未登录&nbsp;请先登录</view>
                </view>

                <view class="u-m-l-10 u-p-10">
                    <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
                </view>

            </view>
        </view>
        <view class="u-m-t-20">
            <u-cell-group>
                <u-cell-item icon="account" title="在线聊天室" @tap="mySetting()"></u-cell-item>
                <u-cell-item icon="setting" title="重置密码" @tap="resetPwd()"></u-cell-item>
            </u-cell-group>
        </view>
        <view class="u-m-t-20">
            <u-cell-group>
                <u-cell-item icon="info" title="退出登录" @tap="doLogout()"></u-cell-item>
            </u-cell-group>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {
                    user_pic: '../../static/logo.png'
                },
                isLogin: false,
            }
        },
        //决定是否显示用户名
        onShow() {
            if (this.checkHasLogined()) {
                this.init();
            } else {
                this.userInfo = {}
            }
        },
        methods: {
            // 跳转到登录页面
            GoToLogin() {
                setTimeout(() => {
                    uni.navigateTo({
                        url: './login/login'
                    })
                }, 1000)
            },
            // 判断是否登录成功
            checkHasLogined() {
                if (uni.getStorageSync("token")) {
                    return true;
                }
                return false;
            },
            init() {
                var userData = uni.getStorageSync("user");
                console.log('user页面的用户信息', userData)
                if (userData.user_pic === null) {
                    userData.user_pic = '../../static/logo.png'
                    this.userInfo = userData;
                } else {
                    this.userInfo = userData;
                }
            },
            //退出登录
            doLogout() {
                if (uni.getStorageSync('token')) {
                    uni.clearStorageSync();
                    uni.showToast({
                        title: "退出成功,跳转到登录页"
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: "/pages/user/login/login"
                        })
                    }, 1000)
                } else {
                    uni.showToast({
                        title: "你还未登录"
                    })
                }
            },
            //跳转到重置密码页面
            resetPwd() {
                if (uni.getStorageSync('token')) {
                    setTimeout(() => {
                        uni.navigateTo({
                            url: "/pages/user/resetPwd/resetPwd"
                        })
                    }, 1000)
                } else {
                    uni.showToast({
                        title: "你还未登录"
                    })
                }
            },
            //跳转到信息修改页面
            mySetting() {
                if (uni.getStorageSync('token')) {
                    setTimeout(() => {
                        uni.navigateTo({
                            url: "/pages/user/setting/setting"
                        })
                    }, 1000)
                } else {
                    uni.showToast({
                        title: "你还未登录"
                    })
                }
            }
        },
    }
</script>

<style scoped>
    @import url("../../static/css/user_style.css");
</style>
